<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      width="800px"
      @closed="close"
      @open="openfn"
    >
      <el-transfer
        v-model="transfervalue"
        :data="transferdata"
        :filterable="true"
        :titles="['用户列表', '当前管理用户']"
      />
      <template #footer>
        <el-button :loading="btnloading" type="primary" @click="updatafn">
          确定
        </el-button>
        <slot name="btnslot"></slot>
        <el-button @click="close">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  // import zform from '@/components/zFrom/zFrom'

  export default {
    name: 'afterlistxjpd',
    components: {},
    emits: ['edtdatafn'],
    data() {
      return {
        dialogVisible: false,
        title: '',
        btnloading: false,
        USearchs0: [],
        transferdata: [],
        transfervalue: [],
        USearchdata: {},
      }
    },
    computed: {},
    mounted() {},
    methods: {
      async show(USearchdata = {}, USearchs0) {
        this.USearchdata = USearchdata
        this.USearchs0 = this.$z.deepClone(USearchs0)
        let { data } = await this.$z.$axios.post('/ShopUserwpuUser', {
          uUser: USearchdata.uUser,
        })
        this.ShopUserwpuUser = data
        this.transferdata = this.USearchs0.map(function (e) {
          return {
            key: e.uUser,
            label: e.uUser,
          }
        })
        this.transfervalue = this.ShopUserwpuUser.map(function (e) {
          return e.uUserdl
        })
        this.dialogVisible = true
      },

      async getdata() {
        // sutype:
      },
      async updatafn() {
        let ShopUserwpuUser = this.ShopUserwpuUser.map(function (e) {
          return e.uUserdl
        })
        let adddata = this.transfervalue.filter(function (e) {
            return !(
              ShopUserwpuUser.findIndex(function (f) {
                return e == f
              }) >= 0
            )
          }),
          deldata = ShopUserwpuUser.filter((e) => {
            return !(
              this.transfervalue.findIndex(function (f) {
                return e == f
              }) >= 0
            )
          })
        let reqs = []
        if (adddata.length != 0) {
          let upadddata = { uUser: this.USearchdata.uUser }
          upadddata.sum = adddata.length
          adddata.forEach(function (e, i) {
            upadddata[`uUserdl${i + 1}`] = e
          })
          reqs.push(this.$z.$axios.post('/ShopUserwpuUseradd', upadddata))
          console.log(upadddata)
        }
        deldata.forEach((e) => {
          reqs.push(
            this.$z.$axios.post('/ShopUserwpuUserdel', {
              uUser: this.USearchdata.uUser,
              uUserdl: e,
            })
          )
        })
        await Promise.all(reqs)
        this.$message.success('操作完成')
        this.show(this.USearchdata, this.USearchs0)
      },
      close() {
        this.dialogVisible = false
      },
      openfn() {},
    },
  }
</script>
<style lang="scss">
  .baseflex {
    display: flex;
    align-items: center;
  }
  .useritem {
    height: 40px;
    padding-left: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;

    &:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    &.active {
      background: rgba(255, 255, 255, 0.2);
    }
  }
  .span12 .el-form-item {
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 8px;
    padding: 10px;
  }
</style>
